<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿小米商城</title>
    <!-- 重置样式 -->
    <link rel="stylesheet" href="/css/reset.css">
    <!-- 公共样式 -->
    <link rel="stylesheet" href="/css/base.css">
    <!-- 当前主页样式 -->
    <link rel="stylesheet" href="/css/header.css">
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/footer.css">
    <link href="/layui/css/layui.css" rel="stylesheet">
    <!-- header main图标库 -->
    <link rel="stylesheet" href="/iconfont/iconfont.css">
    <link rel="shortcut icon" href="/icon/favicon.ico" type="image/x-icon">
    <!-- 引入footer图标库 -->
    <link rel="stylesheet" href="/iconfooter/iconfont.css">
    <script src="/iconfooter/iconfont.js"></script>

</head>


<body>

<!-- 头 -->
<th:block th:include="header"/>

<!-- 轮播图 -->
<section>
    <!-- 轮播图总区域 -->
    <div class="s-con w">
        <!--  轮播图区域 -->
        <div class="banner-wrapper">
            <!-- 左侧的菜单栏 -->
            <ul id="UL1" class="l-list fs12"></ul>
            <!-- 右侧轮播图 -->
            <div class="banner">
                <ul class="banner-img clearfix">
                    <li th:each="b: ${banners.data}">
                        <img th:src="${b.imgPath}" alt="">
                    </li>
                </ul>
                <div class="banner-arr">
                    <span class="left"><i class="iconfont icon-left"></i></span>
                    <span class="right"><i class="iconfont icon-right"></i></span>
                </div>
                <ul class="banner-disc">

                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <!-- 轮播图下边 -->
        <div class="banner-sub">
            <ul class="banner-tool">
                <li>
                    <i class="iconfont icon-zhong"> </i>
                    <span>保障服务</span>
                </li>
                <li>
                    <i class="iconfont icon-ziyuan"></i>
                    <span>企业团购</span>
                </li>
                <li>
                    <i class="iconfont icon-F"></i>
                    <span>F码通道</span>
                </li>
                <li>
                    <i class="iconfont icon-SIMqiaguanli"></i>
                    <span>米粉卡</span>
                </li>
                <li>
                    <i class="iconfont icon-huishuai"></i>
                    <span>以旧换新</span>
                </li>
                <li>
                    <i class="iconfont icon-huafeichongzhi"></i>
                    <span>话费充值</span>
                </li>
            </ul>
            <ul class="banner-ad">
                <li><img src="/img/ad1.jpg" alt=""></li>
                <li><img src="/img/ad2.jpg" alt=""></li>
                <li><img src="/img/ad3.png" alt=""></li>
            </ul>
        </div>
    </div>
</section>

<!-- 内容 -->
<section class="content">
    <div class="c-con w">

        <div class="c-ad">
            <img src="/img/c-ad.webp" alt="">
        </div>

        <!-- 手机 -->
        <div class="c-item1 c-item ">
            <div class="item-title">
                <div class="title-txt">手机</div>
                <div class="more fs16">
                    <span>查看更多</span>
                    <i class="iconfont icon-right-circle-fill"></i>
                </div>
            </div>
            <div class="item-con active clearfix">
                <div class="item1-left fl">
                    <img src="/img/手机.webp" alt="">
                </div>
                <ul class="items fl">
                    <!-- 详情页 -->
                    <script type="type/html" id="tpl">
                        {{ each data item}}
                        <a href="./goods-details.html?pid={{item.id}}" >
                        <li class="item">
                            <img src="{{item.img[0]}}" alt="">
                            <h3 class="item-name">{{item.pName}}</h3>
                            <p class="item-info">120Hz高帧率流速屏</p>
                            <p class="item-price">
                                <span class="present-price">{{ item.pPrice}}元</span>
                                <span class="primary-price">8899元</span>
                            </p>
                        </li>
                        </a>
                        {{/each}}
                    </script>
                    <!--<a href="#">
                      <li class="item">
                        <img src="./img/手机4.webp" class="pic" alt="">
                        <h3 class="item-name">小米MIX FOLD</h3>
                        <p class="item-info">折叠大屏｜自研芯片</p>
                        <p class="item-price">
                          <span class="present-price">9999元起</span>
                          <span class="primary-price"></span>
                        </p>
                      </li>
                    </a>-->
                    <a th:href="'/product/detail?id=' + ${p.id}" th:each="p: ${products}">
                        <li class="item">
                            <img th:src="${p.imgPath}" class="pic" alt="">
                            <h3 class="item-name" th:text="${p.name}"></h3>
                            <p class="item-info" th:text="${p.slogan}">1/1.12''GN2｜2K四微曲屏</p>
                            <p class="item-price">
                                <span class="present-price">[[${p.price}]]元起</span>
                                <span class="primary-price">5999元</span>
                            </p>
                        </li>
                    </a>
                </ul>
            </div>
        </div>

        <!-- 家电 -->
        <div class="c-item2 c-item">
            <div class="item-title">
                <div class="title-txt">家电</div>
                <ul class="more fs16">
                    <li class="active">热门</li>
                    <li>电视影音</li>
                </ul>
            </div>
            <div class="item-con active clear_fix">
                <ul class="items">
                    <li class="item">
                        <img src="/img/家电1.webp" class="pic" alt="">
                    </li>
                    <li class="item">
                        <img src="/img/家电2.webp" class="pic" alt="">
                        <h3 class="item-name">小米电视6 65” OLED</h3>
                        <p class="item-info">小米电视6 65″OLED</p>
                        <p class="item-price">
                            <span class="present-price">6999元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/家电3.webp" class="pic" alt="">
                        <h3 class="item-name">小米电视6 至尊版 65英寸</h3>
                        <p class="item-info">画质新境界</p>
                        <p class="item-price">
                            <span class="present-price">7999元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/家电4.webp" class="pic" alt="">
                        <h3 class="item-name">小米电视 ES55 2022款</h3>
                        <p class="item-info">多分区，画质轻旗舰</p>
                        <p class="item-price">
                            <span class="present-price">3399元起</span>
                            <span class="primary-price">3499元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/家电5.webp" class="pic" alt="">
                        <h3 class="item-name">米家互联网对开门冰箱 540L</h3>
                        <p class="item-info">重磅新品福利特惠</p>
                        <p class="item-price">
                            <span class="present-price">2799元</span>
                            <span class="primary-price">3699元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/家电6.webp" class="pic" alt="">
                    </li>
                    <li class="item">
                        <img src="/img/家电7.webp" class="pic" alt="">
                        <h3 class="item-name">米家超薄电磁炉</h3>
                        <p class="item-info">纤薄美学，精准猛火</p>
                        <p class="item-price">
                            <span class="present-price">499元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/家电8.webp" class="pic" alt="">
                        <h3 class="item-name">米家集尘扫拖机器人</h3>
                        <p class="item-info">自动倒垃圾，45天手不沾尘</p>
                        <p class="item-price">
                            <span class="present-price">2599元</span>
                            <span class="primary-price">2999元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/家电9.webp" class="pic" alt="">
                        <h3 class="item-name">Redmi全自动波轮洗衣机1A 8kg</h3>
                        <p class="item-info">一键操作，父母都爱用</p>
                        <p class="item-price">
                            <span class="present-price">749元</span>
                            <span class="primary-price">899元</span>
                        </p>
                    </li>
                    <li class="item-last">
                        <ul>
                            <li>
                                <div class="item-info">
                                    <h3 class="item-name">米家互联网烟灶套装（天然气）</h3>
                                    <img src="/img/家电10.webp" alt="">
                                </div>
                                <span class="price">1799元起</span>
                            </li>
                            <li>
                                <div class="item-info">
                                    <h3 class="item-name">
                                        <p class="item-more">浏览更多</p>
                                        <p class="hot-item">热门</p>
                                    </h3>
                                    <i class="iconfont  icon-youjiantou"></i>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="item-con clear_fix">
                <ul class="items">
                    <li class="item">
                        <img src="/img/智能1.webp" class="pic" alt="">
                    </li>
                    <li class="item">
                        <img src="/img/智能2.webp" class="pic" alt="">
                        <h3 class="item-name">Xiaomi Sound</h3>
                        <p class="item-info">小米高保真智能音箱</p>
                        <p class="item-price">
                            <span class="present-price">499元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/智能3.webp" class="pic" alt="">
                        <h3 class="item-name">小米路由器AX3000</h3>
                        <p class="item-info">小米路由器AX3000</p>
                        <p class="item-price">
                            <span class="present-price">349元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/智能4.webp" class="pic" alt="">
                        <h3 class="item-name">Redmi路由器AX3000</h3>
                        <p class="item-info">疾速WiFi6，更快一步。</p>
                        <p class="item-price">
                            <span class="present-price">249元</span>
                            <span class="primary-price">269元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/智能5.webp" class="pic" alt="">
                        <h3 class="item-name">小米全自动智能门锁 Pro</h3>
                        <p class="item-info">一步到位，全面高能</p>
                        <p class="item-price">
                            <span class="present-price">2199元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/智能6.webp" class="pic" alt="">
                    </li>
                    <li class="item">
                        <img src="/img/智能7.webp" class="pic" alt="">
                        <h3 class="item-name">小米智能门锁 E</h3>
                        <p class="item-info">告别钥匙，畅享便捷生活</p>
                        <p class="item-price">
                            <span class="present-price">899元</span>
                            <span class="primary-price">999元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/智能8.webp" class="pic" alt="">
                        <h3 class="item-name">小米小爱音箱 Play</h3>
                        <p class="item-info">听音乐、语音遥控家电</p>
                        <p class="item-price">
                            <span class="present-price">109元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/智能9.webp" class="pic" alt="">
                        <h3 class="item-name">米家智能窗帘</h3>
                        <p class="item-info">窗帘开合随心控</p>
                        <p class="item-price">
                            <span class="present-price">749元</span>
                            <span class="primary-price">799元</span>
                        </p>
                    </li>
                    <li class="item-last">
                        <ul>
                            <li>
                                <div class="item-info">
                                    <h3 class="item-name">小米体脂秤2</h3>
                                    <img src="/img/智能10.webp" alt="">
                                </div>
                                <span class="price">99元</span>
                            </li>
                            <li>
                                <div class="item-info">
                                    <h3 class="item-name">
                                        <p class="item-more">浏览更多</p>
                                        <p class="hot-item">热门</p>
                                    </h3>
                                    <i class="iconfont  icon-youjiantou"></i>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 智能 -->
        <div class="c-item2 c-item">
            <div class="item-title">
                <div class="title-txt">智能</div>
                <div class="more fs16">
                    <ul>
                        <li class="active">热门</li>
                        <li>安防</li>
                        <li>出行</li>
                    </ul>
                </div>
            </div>
            <div class="item-con active clear_fix">
                <ul class="items">
                    <li class="item">
                        <img src="/img/智能1.webp" class="pic" alt="">
                    </li>
                    <li class="item">
                        <img src="/img/智能2.webp" class="pic" alt="">
                        <h3 class="item-name">Xiaomi Sound</h3>
                        <p class="item-info">小米高保真智能音箱</p>
                        <p class="item-price">
                            <span class="present-price">499元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/智能3.webp" class="pic" alt="">
                        <h3 class="item-name">小米路由器AX3000</h3>
                        <p class="item-info">小米路由器AX3000</p>
                        <p class="item-price">
                            <span class="present-price">349元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/智能4.webp" class="pic" alt="">
                        <h3 class="item-name">Redmi路由器AX3000</h3>
                        <p class="item-info">疾速WiFi6，更快一步。</p>
                        <p class="item-price">
                            <span class="present-price">249元</span>
                            <span class="primary-price">269元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/智能5.webp" class="pic" alt="">
                        <h3 class="item-name">小米全自动智能门锁 Pro</h3>
                        <p class="item-info">一步到位，全面高能</p>
                        <p class="item-price">
                            <span class="present-price">2199元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/智能6.webp" class="pic" alt="">
                    </li>
                    <li class="item">
                        <img src="/img/智能7.webp" class="pic" alt="">
                        <h3 class="item-name">小米智能门锁 E</h3>
                        <p class="item-info">告别钥匙，畅享便捷生活</p>
                        <p class="item-price">
                            <span class="present-price">899元</span>
                            <span class="primary-price">999元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/智能8.webp" class="pic" alt="">
                        <h3 class="item-name">小米小爱音箱 Play</h3>
                        <p class="item-info">听音乐、语音遥控家电</p>
                        <p class="item-price">
                            <span class="present-price">109元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/智能9.webp" class="pic" alt="">
                        <h3 class="item-name">米家智能窗帘</h3>
                        <p class="item-info">窗帘开合随心控</p>
                        <p class="item-price">
                            <span class="present-price">749元</span>
                            <span class="primary-price">799元</span>
                        </p>
                    </li>
                    <li class="item-last">
                        <ul>
                            <li>
                                <div class="item-info">
                                    <h3 class="item-name">小米体脂秤2</h3>
                                    <img src="/img/智能10.webp" alt="">
                                </div>
                                <span class="price">99元</span>
                            </li>
                            <li>
                                <div class="item-info">
                                    <h3 class="item-name">
                                        <p class="item-more">浏览更多</p>
                                        <p class="hot-item">热门</p>
                                    </h3>
                                    <i class="iconfont  icon-youjiantou"></i>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

        <div class="c-ad">
            <img src="/img/c-ad3.webp" width="1226px" height="120px" alt="">
        </div>

        <!-- 搭配 -->
        <div class="c-item2 c-item">
            <div class="item-title">
                <div class="title-txt">搭配</div>
                <div class="more fs16">
                    <ul>
                        <li class="active">热门</li>
                        <li>耳机音箱</li>
                    </ul>
                </div>
            </div>
            <div class="item-con active clear_fix">
                <ul class="items">
                    <li class="item">
                        <img src="/img/搭配1.webp" class="pic" alt="">
                    </li>
                    <li class="item">
                        <img src="/img/搭配2.webp" class="pic" alt="">
                        <h3 class="item-name">小米降噪耳机 Pro FlipBuds Pro</h3>
                        <p class="item-info">主动降噪 超长续航</p>
                        <p class="item-price">
                            <span class="present-price">799元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/搭配3.webp" class="pic" alt="">
                        <h3 class="item-name">Redmi AirDots 3 Pro</h3>
                        <p class="item-info">智能降噪 超低延迟</p>
                        <p class="item-price">
                            <span class="present-price">299元</span>
                            <span class="primary-price">349元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/搭配4.webp" class="pic" alt="">
                        <h3 class="item-name">小米手环6 NFC版</h3>
                        <p class="item-info">全屏实力</p>
                        <p class="item-price">
                            <span class="present-price">259元</span>
                            <span class="primary-price">279元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/搭配5.webp" class="pic" alt="">
                        <h3 class="item-name">Redmi AirDots 2真无线蓝牙耳机</h3>
                        <p class="item-info">支持蓝牙5.0，自动秒连，拿起就能用</p>
                        <p class="item-price">
                            <span class="present-price">79元</span>
                            <span class="primary-price">99元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/搭配6.webp" class="pic" alt="">
                    </li>
                    <li class="item">
                        <img src="/img/搭配7.webp" class="pic" alt="">
                        <h3 class="item-name">Redmi 手表</h3>
                        <p class="item-info">35g超轻/1.4"大屏/多功能NFC/7天长续航</p>
                        <p class="item-price">
                            <span class="present-price">269元</span>
                            <span class="primary-price">299元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/搭配8.webp" class="pic" alt="">
                        <h3 class="item-name">小米手表Color 运动版</h3>
                        <p class="item-info">超长续航，支持血氧功能</p>
                        <p class="item-price">
                            <span class="present-price">649元</span>
                            <span class="primary-price">499元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/搭配9.webp" class="pic" alt="">
                        <h3 class="item-name">小米真无线蓝牙耳机Air 2s</h3>
                        <p class="item-info">全面升级，智慧真无线</p>
                        <p class="item-price">
                            <span class="present-price">359元</span>
                            <span class="primary-price">399元</span>
                        </p>
                    </li>
                    <li class="item-last">
                        <ul>
                            <li>
                                <div class="item-info">
                                    <h3 class="item-name">米真无线蓝牙耳机Air 2 Pro</h3>
                                    <img src="/img/搭配10.webp" alt="">
                                </div>
                                <span class="price">449元</span>
                            </li>
                            <li>
                                <div class="item-info">
                                    <h3 class="item-name">
                                        <p class="item-more">浏览更多</p>
                                        <p class="hot-item">热门</p>
                                    </h3>
                                    <i class="iconfont  icon-youjiantou"></i>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 配件 -->
        <div class="c-item2 c-item">
            <div class="item-title">
                <div class="title-txt">配件</div>
                <div class="more fs16">
                    <ul>
                        <li class="active">热门</li>
                        <li>充电器</li>
                    </ul>
                </div>
            </div>
            <div class="item-con active clear_fix">
                <ul class="items">
                    <li class="item">
                        <img src="/img/配件1.webp" class="pic" alt="">
                    </li>
                    <li class="item">
                        <img src="/img/配件2.webp" class="pic" alt="">
                        <h3 class="item-name">高速无线充套装 </h3>
                        <p class="item-info">快速无线闪充，Qi充电标准</p>
                        <p class="item-price">
                            <span class="present-price">149元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/配件3.webp" class="pic" alt="">
                        <h3 class="item-name">小米无线充电宝青春版10000mAh</h3>
                        <p class="item-info">能量满满，无线有线都能充</p>
                        <p class="item-price">
                            <span class="present-price">109元</span>
                            <span class="primary-price">129元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/配件4.jpg" class="pic" alt="">
                        <h3 class="item-name">小米插线板（含3口USB 2A快充） </h3>
                        <p class="item-info">3个USB充电口，支持快充</p>
                        <p class="item-price">
                            <span class="present-price">59元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/配件5.webp" class="pic" alt="">
                        <h3 class="item-name">米家魔方转换器</h3>
                        <p class="item-info">方寸之间，能量无限</p>
                        <p class="item-price">
                            <span class="present-price">59元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/配件6.webp" class="pic" alt="">
                    </li>
                    <li class="item">
                        <img src="/img/配件7.webp" class="pic" alt="">
                        <h3 class="item-name">米家插线板 快充版 27W</h3>
                        <p class="item-info">安全的大功率快充插线板</p>
                        <p class="item-price">
                            <span class="present-price">69元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/配件8.webp" class="pic" alt="">
                        <h3 class="item-name">米家筋膜枪</h3>
                        <p class="item-info">米家筋膜枪 </p>
                        <p class="item-price">
                            <span class="present-price">499元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/配件9.jpg" class="pic" alt="">
                        <h3 class="item-name">米家插线板6位基础版（含3口USB 2A快充）</h3>
                        <p class="item-info">小巧设计，便捷不占地儿</p>
                        <p class="item-price">
                            <span class="present-pric">69元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item-last">
                        <ul>
                            <li>
                                <div class="item-info">
                                    <h3 class="item-name">小米车载充电器快充版</h3>
                                    <img src="/img/配件10.webp" alt="">
                                </div>
                                <span class="price">69元</span>
                            </li>
                            <li>
                                <div class="item-info">
                                    <h3 class="item-name">
                                        <p class="item-more">浏览更多</p>
                                        <p class="hot-item">热门</p>
                                    </h3>
                                    <i class="iconfont  icon-youjiantou"></i>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 周边 -->
        <div class="c-item2 c-item">
            <div class="item-title">
                <div class="title-txt">周边</div>
                <div class="more fs16">
                    <ul>
                        <li class="active">热门</li>
                        <li>出行</li>
                    </ul>
                </div>
            </div>
            <div class="item-con active clear_fix">
                <ul class="items">
                    <li class="item">
                        <img src="/img/周边1.webp" class="pic" alt="">
                    </li>
                    <li class="item">
                        <img src="/img/周边2.webp" class="pic" alt="">
                        <h3 class="item-name">米家声波电动牙刷T300</h3>
                        <p class="item-info">31000次/分钟震动，刷的干净</p>
                        <p class="item-price">
                            <span class="present-price">99元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/周边3.webp" class="pic" alt="">
                        <h3 class="item-name">米家声波电动牙刷T500</h3>
                        <p class="item-info">刷的干净、智能护齿</p>
                        <p class="item-price">
                            <span class="present-price">169元</span>
                            <span class="primary-price">179元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/周边4.webp" class="pic" alt="">
                        <h3 class="item-name"> 米家声波电动牙刷T700</h3>
                        <p class="item-info">米家声波电动牙刷T700</p>
                        <p class="item-price">
                            <span class="present-price">369元</span>
                            <span class="primary-price">399元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/周边5.webp" class="pic" alt="">
                        <h3 class="item-name">米家声波电动牙刷T700</h3>
                        <p class="item-info">陶瓷净须，开局之作</p>
                        <p class="item-price">
                            <span class="present-price">399元</span>
                            <span class="primary-price">499元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/周边6.webp" class="pic" alt="">
                    </li>
                    <li class="item">
                        <img src="/img/周边7.webp" class="pic" alt="">
                        <h3 class="item-name">米家电动剃须刀S100</h3>
                        <p class="item-info">浮动双刀头 全身水洗</p>
                        <p class="item-price">
                            <span class="present-price">78元</span>
                            <span class="primary-price">79元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/周边8.webp" class="pic" alt="">
                        <h3 class="item-name">米家电动剃须刀S500 </h3>
                        <p class="item-info">浮动贴面更干净，减压设计更舒适</p>
                        <p class="item-price">
                            <span class="present-price">169元</span>
                            <span class="primary-price">199元</span>
                        </p>
                    </li>
                    <li class="item">
                        <img src="/img/周边9.webp" class="pic" alt="">
                        <h3 class="item-name">米家电动剃须刀S300</h3>
                        <p class="item-info">青年“无须”新选择</p>
                        <p class="item-price">
                            <span class="present-price">99元</span>
                            <span class="primary-price"></span>
                        </p>
                    </li>
                    <li class="item-last">
                        <ul>
                            <li>
                                <div class="item-info">
                                    <h3 class="item-name">日常元素抽纸 青春版 24包/箱</h3>
                                    <img src="/img/周边10.webp" alt="">
                                </div>
                                <span class="price">25.9元</span>
                            </li>
                            <li>
                                <div class="item-info">
                                    <h3 class="item-name">
                                        <p class="item-more">浏览更多</p>
                                        <p class="hot-item">热门</p>
                                    </h3>
                                    <i class="iconfont  icon-youjiantou"></i>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

        <div class="c-ad">
            <img src="/img/c-ad2.webp" alt="">
        </div>

        <!-- 视频 -->
        <div class="c-item3 c-item">
            <div class="item-title">
                <div class="title-txt">视频</div>
                <div class="more fs16">
                    <span>查看全部</span>
                    <i class="iconfont icon-right-circle-fill"></i>
                </div>
            </div>
            <div class="item-con active clearfix">
                <ul class="items fl">
                    <a href="#">
                        <li>
                            <img src="/img/shiping1.webp" alt="">
                            <h3 class="video-name">2021年春季新品发布会第一场</h3>
                            <p class="video-info"></p>
                            <span> <i class="iconfont  icon-shipinbofang-"></i></span>

                        </li>
                    </a>
                    <a href="#">
                        <li>
                            <img src="/img/shiping2.webp" alt="">
                            <h3 class="video-name">2021年春季新品发布会第一场</h3>
                            <p class="video-info">Redmi 10X系列发布会 </p>
                            <span><i class="iconfont  icon-shipinbofang-"></i></span>

                        </li>
                    </a>
                    <a href="#">
                        <li>
                            <img src="/img/shiping3.webp" alt="">
                            <h3 class="video-name">2021年春季新品发布会第一场</h3>
                            <p class="video-info"></p>
                            <span><i class="iconfont  icon-shipinbofang-"></i></span>

                        </li>
                    </a>
                    <a href="#">
                        <li>
                            <img src="/img/shiping4.webp" alt="">
                            <h3 class="video-name">2021年春季新品发布会第一场</h3>
                            <p class="video-info"></p>
                            <span> <i class="iconfont  icon-shipinbofang-"></i></span>

                        </li>
                    </a>
                </ul>
            </div>
        </div>

    </div>
</section>

<!-- 工具栏 -->
<section class="home-tool">
    <ul>
        <li>
            <i class="iconfont icon-shouji"></i>
            <span>手机App</span>
            <div class="mi-app">
                <img src="/img/mi-app.png" alt="">
                <span>
                        扫码领取新人百元礼包
                    </span>
            </div>
        </li>
        <a href="/personal">
            <li>
                <i class="iconfont icon-yonghu"></i>
                <span>个人中心</span>
            </li>
        </a>
        <li>
            <a href="/address/page">
                <i class="iconfont icon-kefu"></i>
                <span>我的地址</span>
            </a>
        </li>
        <li>
            <a href="/cart/page">
                <i class="iconfont  icon-gouwuche"></i>
                <span>购物车</span>
            </a>
        </li>
    </ul>
    <ul>
        <li>
            <i class="iconfont  icon-top"></i>
            <span>回顶部</span>
        </li>
    </ul>
</section>

<section class="home-loft">
    <ul>
        <li>
            <i class="iconfont  icon-shouji"></i>
            <span>手机</span>
        </li>
        <li>
            <i class="iconfont  icon-jiadian"></i>
            <span>家电</span>
        </li>
        <li>
            <i class="iconfont  icon-jiqiren"></i>
            <span>智能</span>
        </li>
        <li>
            <i class="iconfont  icon-shoubiao"></i>
            <span>搭配</span>
        </li>
        <li>
            <i class="iconfont  icon-chongdianqi"></i>
            <span>配件</span>
        </li>
        <li>
            <i class="iconfont  icon-tubiaoCSban-"></i>
            <span>周边</span>
        </li>
        <li>
            <i class="iconfont  icon-shipin"></i>
            <span>视频</span>
        </li>
    </ul>
</section>

<!-- 脚 -->
<th:block th:include="footer"/>

<script src="/js/jquery.min.js"></script>
<script src="/js/header.js"></script>
<script src="/js/main.js"></script>
<script src="/js/footer.js"></script>
<script src="/js/swiper copy.js"></script>
<script src="/js/template-web.min.js"></script>
<script src="/js/index.js"></script>
<script src="/layui/layui.js"></script>

<script type="text/html" id="categoryTemplate">
    {{#  layui.each(d, function(index, item){       }}
    <li>
        <a href="javascript:;">{{=item.name}}</a>
        <i class="iconfont icon-right"></i>
        <div class="child-list">
            <ul class="child-list-item">
                {{# layui.each(item.children, function(i, v){ }}
                <li>
                    <img src="{{=v.imgPath}}" alt="">
                    <span>{{=v.name}}</span>
                </li>
                {{# }) }}
            </ul>
        </div>
    </li>
    {{#  })  }}
</script>

<script type="text/html" id="template3">
    <form class="layui-form layui-form-pane" lay-filter="form1" style="margin-left: 20px">
        <div class="layui-form-item" style="margin-top: 15px">
            <div class="layui-inline">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-inline">
                    <img id="img" width="50px" height="50px">
                    <input id="imgPath" type="hidden" name="avatar" autocomplete="off" class="layui-input" style="width: 250px">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 15px">
            <div class="layui-inline">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-block">
                    <input type="text" name="account" disabled autocomplete="off" class="layui-input" style="width: 250px">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 15px">
            <div class="layui-inline">
                <label class="layui-form-label">用户昵称</label>
                <div class="layui-input-block">
                    <input type="hidden" name="id"/>
                    <input type="text" name="nickname" autocomplete="off" class="layui-input" style="width: 250px">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 15px">
            <div class="layui-inline">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="phone" autocomplete="off" class="layui-input" style="width: 250px">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 15px">
            <div class="layui-inline">
                <label class="layui-form-label">默认地址</label>
                <div class="layui-input-block">
                    <select id="address" lay-filter="address" name="defAddress"></select>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 15px; margin-left: 105px">
            <div class="layui-inline">
                <input id="searchBtn" type="button" value="重置" class="layui-btn">
                <input id="saveBtn" type="button" value="保存" class="layui-btn">
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="template1">
    <form class="layui-form layui-form-pane" lay-filter="form1" style="margin-left: 20px">
        <div class="layui-form-item" style="margin-top: 15px">
            <div class="layui-inline">
                <label class="layui-form-label">原密码</label>
                <div class="layui-input-block">
                    <input type="password" name="prePassword" lay-verify="required|prePassword"
                           autocomplete="off" class="layui-input" style="width: 250px">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 15px">
            <div class="layui-inline">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input type="password" id="newPassword" name="newPassword" lay-verify="required|newPassword"
                           autocomplete="off" class="layui-input" style="width: 250px">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 15px">
            <div class="layui-inline">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="confirmPassword" lay-verify="required|confirmPassword"
                           autocomplete="off" class="layui-input" style="width: 250px">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 15px; margin-left: 105px">
            <div class="layui-inline">
                <input id="searchBtn" type="button" value="重置" class="layui-btn">
                <input id="saveBtn" lay-submit="" lay-filter="save" type="button" value="保存" class="layui-btn">
            </div>
        </div>
    </form>
</script>


<script>
    layui.use(["layer", "laytpl", "form", "upload"], function () {
        let layer = layui.layer,
            $ = layui.jquery,
            laytpl = layui.laytpl,
            form = layui.form,
            upload = layui.upload;

        //查询商品列表
        $.get("/category/list", function (categories) {
            console.log(categories);
            //将categories数据转化成html，再插入到UL1里
            laytpl($("#categoryTemplate").html()).render(categories, function (a) {
                $("#UL1").html(a);
            });
            $(".l-list").children("li").hover(function () {
                $(this).css({backgroundColor: "#ff6700"}).siblings().css({backgroundColor: "transparent"});
                $(this).children(".child-list").css({display: "block"}).parent().siblings().children(".child-list").css({display: "none"});
                $(this).find("li").hover(function () {
                    $(this).css({color: "#ff6700"})
                }, function () {
                    $(this).css({color: "#333"})
                })
            }, function () {
                $(this).css({backgroundColor: "transparent"}).children(".child-list").css({display: "none"})
            });
        });

    });

</script>

</body>

</html>